<template>
  <div>
    <!--   添加优惠券  -->
    <div class="btn">
      <el-button type="primary" @click="addCou">添加优惠券</el-button>
    </div>
    <!--   优惠券列表  -->
    <div class="content">
      <el-card>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="优惠券名"
          >
          </el-table-column>
          <el-table-column
            prop="sum"
            label="金额">
          </el-table-column>
          <el-table-column
            prop="count"
            label="数量">
          </el-table-column>
          <el-table-column
            label="类型">
            <template slot-scope="scope">
              <span v-if="scope.row.type===1">满减券</span>
              <span v-if="scope.row.type===2">抵用券</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status===0" type="warning">未发布</el-tag>
              <el-tag v-else type="success">已发布</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="使用范围">
            <template slot-scope="scope">
              <span>{{scope.row.startTime}}</span>
              <p><span>{{scope.row.dueTime}}</span></p>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
              <el-button type="success" size="mini" @click="handleSon(scope.row.id)">送券</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageChange"
        >
        </el-pagination>
      </el-card>
    </div>
    <create ref="create" @Ok="handleInit"></create>
    <edit ref="edit" @Ok="handleInit"></edit>
    <son ref="son" @Ok="handleInit"></son>
  </div>
</template>
<script>
  import {couponList} from "@/api/coupon";
  import Create from './components/create'
  import Edit from './components/edit'
  import Son from './components/son'

  export default {
    components: {
      Create,
      Edit,
      Son
    },
    data() {
      return {
        dialogVisible: false,
        form: {
          name: ''
        },
        tableData: [],
        page: 1,
        size: 10,
        total: 0,
      }
    },
    mounted() {
      this.handleInit()
    },
    methods: {
      addCou() {
        this.$refs['create'].show()
      },
      handleInit() {
        var that = this
        let page = that.page
        let size = that.size
        couponList(page, size).then(res => {
          if (res.status === 200) {
            that.tableData = res.result.records
            that.total = Number(res.result.total)
          }
        })
      },
      handleEdit(id) {
        this.$refs['edit'].show(id)
      },
      handleSon(id) {
        this.$refs['son'].show(id)
      },
      pageChange(e) {
        this.page = e
        this.handleInit()
      },
    }
  }
</script>
<style scoped>
  .btn {
    width: 100%;
    padding: 20px 0 0 20px;
    box-sizing: border-box;
  }

  .content {
    width: 100%;
    padding: 20px 0 0 20px;
    box-sizing: border-box;
  }

  .el-pagination {
    margin-top: 20px;
  }

</style>
